<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CSS3 碰撞反弹动画无限运动</title>
  <style type="text/css">
    .container {
      width: 600px;
      height: 400px;
      border: 1px solid #333;
      position: relative;
    }

    .ball {
      position: absolute;
      left: 0;
      top: 0;
      width: 20px;
      height: 20px;
      border-radius: 20px;
      border: 1px solid #999;
      /* alternate：动画先正常运行再反方向运行，并持续交替运行 */
      animation: horizontal 10s linear 0s infinite alternate, vertical 6s linear 0s infinite alternate;
    }

    @keyframes horizontal {
      0% {
        left: 0;
      }

      100% {
        /* 运动最大距离为盒子长度减去球的长度 */
        left: calc(600px - 20px);
      }
    }

    @keyframes vertical {
      0% {
        top: 0;
      }

      100% {
        /* 运动最大距离为盒子高度减去球的高度 */
        top: calc(400px - 20px);
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="ball" style="border: 1px solid black;"></div>
  </div>
</body>

</html>
